<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>star</title>
    <style>
      body {
        font-family: "Courier New", Courier, monospace;
        font-size: 30px;
      }
      .container {
        width: max-content;
        margin: 0 auto;
        background-color: rgb(243, 255, 175);
        padding: 20px 100px;
      }
    </style>
  </head>
  <body class="container">
    <script>
      for (let i = 0; i < 5; i++) {
        //外层循环控制行
        //在绘制星星之前，先绘制空格占位，就可以绘制为等腰三角形
        for (let k = 0; k < 5 - 1 - i; k++) {
          //绘制空格
          document.write("&nbsp;");
        }
        for (let j = 0; j < i * 2 + 1; j++) {
          //内层循环控制列
          //绘制星星
          document.write("<span style='color:#1e1eff'>*<span/>");
        } //内层for循环结束，就绘制完一行
        document.write("<br>");
      }

      for (let i = 4; i >= 0; i--) {
        //外层循环控制行
        //在绘制星星之前，先绘制空格占位，就可以绘制为等腰三角形
        for (let k = 0; k < 5 - 1 - i; k++) {
          //绘制空格
          document.write("&nbsp;");
        }
        for (let j = 0; j < i * 2 + 1; j++) {
          //内层循环控制列
          //绘制星星
          document.write("<span style='color:#ff2015'>*<span/>");
        } //内层for循环结束，就绘制完一行
        document.write("<br>");
      }
    </script>
  </body>
</html>
